import Vue from 'vue'
import Router from 'vue-router'
// 98-10 路由懒加载-③ 将路由改为按需加载的形式，示例代码如下：
// 示例代码 const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
// import Login from './components/Login.vue'
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ './components/Login.vue')
//第十一步
// import Home from './components/Home.vue'
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ './components/Home.vue')
// 10-1 实现首页路由的重定向效果
// 10-1-1 实现首页路由的重定向效果导入欢迎组件
// import Welcome from './components/Welcome.vue'
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ './components/Welcome.vue')
//12-1用户列表-通过路由的形式展示用户列表组件
//12-1-1 先去创建Users.vue，构建模板
// import Users from './components/Users.vue'
const Users = () => import(/* webpackChunkName: "Users_Rights_Roles" */ './components/Users.vue')
//30-1-1 通过路由的形式展示权限列表组件，先创建Rights.vue 模板
// import Rights from './components/power/Rights.vue'
const Rights = () => import(/* webpackChunkName: "Users_Rights_Roles" */ './components/power/Rights.vue')
// // 32-1-2 创建roles.vue文件，搭建模板
// import Roles from './components/power/Roles.vue'
const Roles = () => import(/* webpackChunkName: "Users_Rights_Roles" */ './components/power/Roles.vue')
// 37-1-2：在router.js文件中导入cate.vue文件，然后在进行路由重定义，将/categories跳转到cate.vue组件中
// import Cate from './components/goods/Cate.vue'
const Cate = () => import(/* webpackChunkName: "Cate_Params" */ './components/goods/Cate.vue')
// 47-1-1分类参数-通过路由加载分类参数组件页面
// import Params from './components/goods/Params.vue'
const Params = () => import(/* webpackChunkName: "Cate_Params" */ './components/goods/Params.vue')
//71-1-1商品列表-通过路由加载商品列表组件
// import List from './components/goods/List.vue'
const List = () => import(/* webpackChunkName: "GoodsList_Add" */ './components/goods/List.vue')
// 77-1-2：商品列表-通过编程时导航跳转到商品添加页面
// import Add from './components/goods/Add.vue'
const Add = () => import(/* webpackChunkName: "GoodsList_Add" */ './components/goods/Add.vue')
//91-1-1 创建Order.vue文件，并渲染文件内容
//91-1-2 订单列表：通过路由渲染订单列表页面
// import Order from './components/order/Order.vue'
const Order = () => import(/* webpackChunkName: "Order_Report" */ './components/order/Order.vue')
// 97-1-1：数据统计-通过路由加载数据报表组件
// import Report from './components/report/Report.vue'
const Report = () => import(/* webpackChunkName: "Order_Report" */ './components/report/Report.vue')
Vue.use(Router)

// export default new Router({
//   routes: [
//     // 重定向login
//     { path: '/', redirect: '/login' },
//     { path: '/login', component: Login },
//     //第十一步
//     { path: '/home', component: Home }
//   ]
// })

// 第十二步 将上面注释部分改成如下方式
const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    // 10-1-2 重新定义路由规则
    {
      path: '/home',
      component: Home,
      redirect: '/welcome',
      //设置重定义的路径，以及指向某个组件
      children: [
        { path: '/welcome', component: Welcome },
        //12-1-2 通过路由重定义跳转到指定的Users.vue组件模板
        { path: '/users', component: Users },
        //30-1-2 通过路由重定义跳转到指定的Rights.vue组件模板
        { path: '/rights', component: Rights },
        // 32-1-2 通过路由重定义跳转到指定的角色组件模板
        { path: '/roles', component: Roles },
        // 37-1-2：通过路由重定义跳转到指定的商品分类组件模板
        { path: '/categories', component: Cate },
        //47-1-1分类参数-通过路由加载分类参数组件页面
        { path: '/params', component: Params },
        //71-1-1商品列表-通过路由加载商品列表组件
        { path: '/goods', component: List },
        //77-1-3：商品列表-通过编程时导航跳转到商品添加页面
        { path: '/goods/add', component: Add },
        //91-1-3 订单列表：通过路由渲染订单列表页面
        { path: '/orders', component: Order },
        // 97-1-1：数据统计-通过路由加载数据报表组件
        { path: '/reports', component: Report }
      ]
    }
  ]
})

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  //     next()  放行    next('/login')  强制跳转

  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  console.log(tokenStr)
  if (!tokenStr) return next('/login')
  next()
})

export default router
